<template>
	<view class="__lib-infinity-scroll" :style="{animationDuration: duration+'ms', animationDelay:delay+'ms'}">
		<template v-for="(item, index) in [1,2,3,4,5]" :key="index">
			<slot></slot>
		</template>
	</view>
</template>

<script>
	/**
	 * @description 无缝滚动 只能支持H5
	 * @property {number} delay 动画延迟
	 * @property 
	 */


	export default {
		name: 'lib-infinity-scroll',
		emit: [],
		props: {
			type: {
				type: String,
				default: 'default',
				required: false,
			},
			/** 动画延迟 */
			delay: {
				type: Number,
				default: 0,
				required: false,
			},
			/** 每秒移动步长（px） */
			speed: {
				type: Number,
				default: 100,
				required: false,
			},
		},
		data() {
			return {
				/** 动画时间 */
				duration: 0,
			}
		},
		methods: {
			init() {
				const query = uni.createSelectorQuery().in(this);
				query
					.select(".__lib-infinity-scroll")
					.boundingClientRect((data) => {
						const width = (data).width || 0;
						const speed = this.speed / 1000;
						this.duration = (width / 5) / speed;
					})
					.exec();
			},
		},
		async mounted() {
			this.init();
		},
		updated() {},
		unmounted() {},
		destroyed() {},
		watch: {},
	}
</script>


<style lang="scss" scoped>
	@import "./lib-infinity-scroll.scss";
</style>